<template>
	<view>
		<view class="head text-white padding-lr" :style="{'padding-top':CustomBar+'px'}">
			<view :style="{'height':CustomBarH+'px'}" :class="['align-center',{'active_top':is_fixed}]">
				<view class="align-center">
					<biaofun-region @changeEmit="changeRegion":color="'white'" :placeholder="addressName" />
					<text class="cuIcon-unfold"></text>
				</view>
				<view class="head_input margin-left align-center " @click="$tools.push('/pages/plugins/search')">
					<image src="/static/home/icon_sysous.png" mode="" class="input_icon"></image>
					<input type="text" value="" placeholder="请输入搜索内容" placeholder-style="color:white" />
				</view>
			</view>
			<view :style="[{'padding-top':CustomBar+'px'},{'opacity':opacity}]"
				:class="['align-center','active_body_top']">
				<view class="align-center">
					<biaofun-region @changeEmit="changeRegion" :color="'white'" :placeholder="addressName" />
					<text class="cuIcon-unfold"></text>
				</view>
				<view class="head_input margin-left align-center " @click="$tools.push('/pages/plugins/search')">
					<image src="/static/home/icon_sysous.png" mode="" class="input_icon"></image>
					<input type="text" value="" placeholder="请输入搜索内容" placeholder-style="color:white" />
				</view>
			</view>
			<view class="margin-top">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" class="swiper_image">
					<swiper-item v-for="(item,index) in bannerList" :key="index" class="swiper_image"
						@click="preview(0,[item.image])">
						<image :src="item.image" mode="aspectFill" class="swiper_image bg-gray"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="padding margin-top bg-white radius ">
				<view class="align-center">
					<view class="title_shu"></view>
					<view class="text-lg text-bold margin-left-xs text-black">分类</view>
				</view>
				<view class="flex align-center margin-top-lg rowsb">
					<view v-for="(item,index) in categoryList" :key='index' @click="classify(item)">
						<view class="classify_body">
							<image :src="item.icon" mode="" class="classify_icon"></image>
							<view class="classify_title">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="padding margin-top bg-white radius ">
				<view class="align-center">
					<view class="title_shu"></view>
					<view class="text-lg text-bold margin-left-xs text-black">精选</view>
				</view>
				<view class="shop_body" v-for="(item,index) in recommendList" :key='index' @click="shopDetail(item)">
					<view>
						<image :src="item.mainImg" mode="aspectFill"></image>
					</view>
					<view class="padding-left-sm">
						<view class="align-center rowsb">
							<view class="title one_overflow flex" v-if="item.localTour == 1">
								<view class="cityMark text-center">同城</view>
								<view class="margin-left-xs">{{item.name}}</view>
							</view>
							<view class="title one_overflow" v-else>{{item.name}}</view>
							<view class="date margin-top-sm">{{item.daysExplain}}</view>
						</view>
						<view class="content two_overflow margin-tb-sm">{{item.introduce}}</view>
						<view class="pay">￥{{item.price}}</view>
						<view class="flex justify-end">
							<view class="submit">立即购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_indexCategory, //分类
		get_recommendTour, //精选
		getbannerList, //轮播图
	} from '@/common/path.js'
	var QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	var qqmapsdk = new QQMapWX({
		key: '32KBZ-MC6WU-DOZVZ-2ZUYK-H7NKV-VYF7L'
	});
	import {
		preview
	} from '../../common/updataImgList.js'
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				CustomBar: '', //胶囊距离顶部高度
				// #endif

				// #ifdef H5
				CustomBar: 15,
				// #endif
				// #ifdef MP-WEIXIN
				CustomBarH: '', //胶囊高度
				// #endif
				// #ifdef H5
				CustomBarH: '',
				// #endif

				is_fixed: false, //默认false不固定

				opacity: 0,
				//首页分类
				categoryList: [],
				//一页10条
				pageSize: 10,
				//第一页
				pageNum: 1,
				//景点列表
				recommendList: [],

				address: '', //定位

				region: [],

				//轮播图
				bannerList: [],
				//选择省市区
				addressName: '请选择',
				addressId: '', //区id
				cityName: '', //市名称

			}
		},
		watch: {
			is_fixed(event) {
				console.log(event);
			},
			opacity(event) {}
		},
		//生命周期函数
		onReady() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			this.CustomBar = custom.top
			this.CustomBarH = custom.height
			// #endif
		},
		onShow() {
			uni.setStorageSync('mpShareTitle', '芒果乐油团')
			if (uni.getStorageSync('address')) {
				let addres = uni.getStorageSync('address')
				this.addressName = addres.name
				this.addressId = addres.id
				//景点
				this.get_recommendTour()
			} else {
				//定位
				this.locationMen()
			}
			//首页分类
			this.get_indexCategory()

			//轮播图
			this.getbannerList()
			
			
			//清楚
			 uni.removeStorage({  key: 'shopId', });
		},
		onLoad(option) {
			if (option.idd) {
				uni.setStorageSync('idd',option.idd)
			}else{
				uni.removeStorage({  key: 'idd'});
			}
		},
		methods: {
			//选择省市区
			changeRegion(region) {
				// console.log('[选择地址]', region);
				this.addressName = region.name
				uni.setStorageSync('address', region)
				let addres = uni.getStorageSync('address')
				this.addressId = addres.pid
				this.get_recommendTour()
				uni.setStorageSync('addressId', this.addressId)
			},

			//轮播图
			getbannerList() {
				let data = {
					type: 0
				}
				this.Http.POST(getbannerList, data)
					.then((res) => {
						if (res.code == -0) {
							// console.log('轮播图', res);
							this.bannerList = res.data
						}
					})
			},

			//地址选择
			RegionChange(e) {
				this.region = e.detail.value
			},
			locationMen() {
				let self = this
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					geocode: true,
					success: (res) => {
						self.team(res.latitude, res.longitude)
					},
					fail: (err) => {
						self.team(36.65184, 117.12009)
						self.addressName = '济南'
					}
				})
			},
			team(userLatitude, userLongitude) {
				let self = this
				let obj = {
					latitude: userLatitude,
					longitude: userLongitude
				}
				// console.log('[定位]', obj);
				qqmapsdk.reverseGeocoder({
					location: obj || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
					success: function(res) { //成功后的回调
							// console.log('[地址]', res.result);
						if (res.status == 0) {
							self.addressId = res.result.ad_info.adcode
							self.addressName = res.result.address_component.city
							self.address = res.result.address_component.city

							uni.setStorageSync('addressId', self.addressId)
							self.get_recommendTour()

							this.cityName = res.result.ad_info.city

						}else{
							self.addressName ='济南'
							self.get_recommendTour()
						}
					},
					fail: function(error) {
						uni.showModal({
							title:'温馨提示',
							content:error.message
						})
					},
				})
			},

			//图片预览
			preview(index, array) {
				preview(index, array)
			},
			//分类预览
			classify(item) {
				uni.switchTab({
					url: '/pages/shop/index'
				})
				uni.setStorageSync('switch', item.id)

			},

			//打开定位
			location() {


			},

			//首页分类
			get_indexCategory() {
				this.Http.GET(get_indexCategory, {})
					.then((res) => {
						// console.log('[首页分类]', res);
						if (res.code == 0) {
							this.categoryList = res.data
						}
					})
			},
			//景点
			get_recommendTour() {
				this.Http.POST(get_recommendTour, {
						pageNum: this.pageNum, //第几页
						pageSize: this.pageSize, //页条数
						cityCode: this.addressId, //城市id
					})
					.then((res) => {
						// console.warn('[精选-景点]', res);
						if (res.code == 0) {
							if (this.pageNum == 1) {
								this.recommendList = res.data
							} else {
								this.recommendList.push(...res.data)
							}
						}
					})
			},

			//商品详情
			shopDetail(item) {
				// uni.setStorageSync('shopId',item.id)
				uni.navigateTo({
					url: '/pages/shop/detail?id='+item.id 
				})
			},

			//下拉刷新触发
			onPullDownRefresh() {
				setTimeout(res => {
					this.get_recommendTour()
					this.$tools.showToast('数据加载成功')
					uni.stopPullDownRefresh();
				}, 1000)
			},

			// 滚动时触发
			onPageScroll(event) {
				this.opacity = event.scrollTop * 0.01
				// console.log(this.opacity);
			},
		},
		computed: {},
		components: {}
	}
</script>

<style lang="scss">
	.head {
		width: 750rrpx;
		height: 275rpx;
		background: linear-gradient(180deg, #2AD5CA 0%, #32DBBC 100%);
		border-radius: 0rpx 0 60rpx 60rpx;

		.head_input {
			width: 356rpx;
			height: 60rpx;
			border-radius: 46rpx;
			background: rgba(255, 255, 255, 0.3);
		}

		input {
			color: white;
		}

		.input_icon {
			width: 30rpx;
			height: 30rpx;
			margin-left: 30rpx;
			margin-right: 10rpx;
		}
	}

	//轮播图
	.swiper_image {
		width: 690rpx;
		height: 272rpx;
		border-radius: 15rpx;
		overflow: hidden;

	}

	// 分类
	.title_shu {
		width: 6rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #26D3D1 0%, #32DBBB 59%, #3BE1AB 100%);
		opacity: 1;
		border-radius: 12rpx;
	}

	.classify_body {

		.classify_icon {
			width: 91rpx;
			height: 91rpx;
			// background: #000000;
			border-radius: 50%;
		}

		.classify_title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #161617;
			opacity: 1;
		}
	}

	// 商品	
	.shop_body {
		position: relative;
		margin-top: 30rpx;

		image {
			height: 300rpx;
			width: 100%;
			background: #EEEEEE;
			opacity: 1;
			border-radius: 10rpx;
		}

		.title {
			width: 570rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #161617;
			opacity: 1;
			margin-top: 20rpx;
		}

		.content {
			width: 312rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 33rpx;
			color: #B4B4B4;
			opacity: 1;
		}

		.pay {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #DE1010;
			opacity: 1;
		}

		.submit {
			width: 154rpx;
			height: 50rpx;
			background: linear-gradient(180deg, #29D5CB 0%, #38DFB0 100%);
			opacity: 1;
			border-radius: 35rpx;
			line-height: 50rpx;
			text-align: center;
			color: white;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.date {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #38DFB1;
			opacity: 1;
		}
	}

	page {
		background: #F3F2F5;
	}

	view {
		// border: 1rpx solid red;
	}

	.active_top {
		opacity: 0;
	}

	.active_body_top {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: linear-gradient(180deg, #29D5CB 0%, #38DFB0 100%);
		z-index: 9;
		padding-bottom: 30rpx;
		padding-left: 30rpx;
	}


	page {
		padding-bottom: 120rpx;
	}

	.cityMark {
		font-size: 25rpx;
		width: 80rpx;
		height: 39rpx;
		line-height: 39rpx;
		color: #FFFFFF;
		background-color: #E81B27;
		border-radius: 20rpx;
	}
</style>
